<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="myplacelayout">
</head>
<body>
	<div class="pagewrapper" style="position: relative;">
		<div id="map-canvas-myplace" class="list-canvas"
			style="margin-top: 0px; top: 0px; width: 100%; height: 600px;; position: absolute;"></div>
		<input type="button" id="openlist" class="list-open"
			style="top:0px; left:0px;display:none; background-image: url(${resource(dir: 'images', file: 'arrow20.png')}); ">
		<input type="button" id="closeListMyPlace" class="list-close"
			style="top:0px;background-image: url(${resource(dir: 'images', file: 'arrow19.png')}); ">

		<div id="numberofplace" class="div-place-header"
			style="top: 0px; color: #4587BA; background-color: #e2e2e2; font-size: 110%; padding-top: 2px"
			id="mylist">
			${listMyPlaces.size }
			Listting on map
		</div>

		<div id="listopen" style="height: 600px; top: 22px;">
			<div id="listopen2" class="style-scrollbar bglist"
				style="top: 0px; width: 100%; height: 577px; z-index: 40; position: absolute; left: 0%; overflow-y: scroll;">
				<g:each in="${listMyPlaces}" var="place">
					<script>
						 	var poi = {};
						 	var currentPlaceID;
						 	poi.id			= 	'${place.id}';
							poi.address 	= 	'${place.address}';
							poi.price		= 	'${place.price}';
							poi.lat 		= 	'${place.lat}';
							poi.lng 		= 	'${place.lng}';
							poi.imgpath		= 	'${createLink(uri:'/Avatar/getAvatar?placeID='+place.id)}'
							pois.push(poi);
						</script>
					<div class="placeitem" id="${place.id}"
						onMouseOver="onMouseIn(this)" onMouseOut="onMouseOut(this)" onClick="clickOnPlaceItem(this),listimage(this)"
						style="margin-top: 10px;; margin-left: 15px; margin-right: 15px; padding-top: 15px; padding-left: 25px;cursor:pointer">
						<img
							src="${createLink(uri:'/Avatar/getAvatar?placeID='+place.id)}"
							width=160px height=140px
							style="float: right; margin-top: 3px; margin-right: 10px; margin-left: 5px" />
						<div style="font-size: 125%;">
							Address:
							${place.address}
						</div>
						<div class="" style="padding-top: 10px">
							Description: ${place.description}
						</div>
					</div>
				</g:each>
			</div>
		</div>
	</div>
	
	<div id="rightclickMarker" style="display: none;"></div>
	<div id="info"></div>
	
	<div id="frmDetail" class="superContainer"
        style="position: absolute; top: 13%; left: 20% ; z-index: 70;">
        <div id="btn1">
            <input type="button" class ="btnClose" onclick="closeDetail();"/>
        </div>
        <div class="container">

            <ul class="tabs" style="position: absolute; top: 5px; left: 10px;" >
                <li><a href="#tab1">Details</a></li>
                <li><a href="#tab2">Photo</a></li>
                <li><a href="#tab3">Feature</a></li>
                <li><a href="#tab4">Right next services</a></li>
            </ul>
            <div class="tab_container"style="position: absolute; top:39px; left: 10px;">
                <div id="tab1" class="tab_content">                
                    <div id="addressValue" style="width: 277px;height: 376px;background-color: #dddddd;color:#0053a6; position: absolute; float:right;top: 20px; left: 500px;padding-left:20px;padding-top:20px">
                    </div>
                    <div id="imageplace" style="width:470px;height:280px; position: absolute; float:left;top: 20px">
                    
                    </div>
                    <div id="contactplace" style="width:460px;height:96px;background-color: #dddddd;color:#0053a6; position: absolute; float:left;top:300px;padding-left:20px;padding-top:20px">                    
                    </div>                
                </div>
                 <div id="tab2" class="tab_content">
                <div style="width: 277px; height:28px; color: #0053a6; position: absolute; float: right; left: 500px;  top:20px ;">
                        <div id="myTask" style="float: left;">
                            <a href="#" id="dislike" onclick="isLikeInMyPlace(this);"style="display: none;position: absolute;margin-left: 20px;top:5px;">unlike</a>
                            <a href="#" id="like" onclick="isLikeInMyPlace(this);" style="display: none;position: absolute;margin-left: 20px;top:5px;">like</a>
                        </div>        
                        <div style="margin-left: 47px;position: absolute;"><img style="position: absolute;left:20px;" alt="Lemon team" class="home-logo" src="${resource(dir: 'images', file: 'like.png')}" /></div>                
                        <div id="countOflike" style="margin-left: 100px;position: absolute;top:5px"></div>
                        

                </div>
                         <div id="123" class="style-scrollbar"
                        style="width: 277px; height: 325px;
                        background-color: #dddddd; color: #0053a6;
                        position: absolute; float: right;
                        top: 50px; left: 500px; overflow: scroll;overflow-x:hidden;
                        padding-left: 20px; padding-top: 20px; ">
                        
                        <div id="listAllOldComment" class="style-scrollbar" style="margin-top: 10px;"></div>
                        <div id="listAllComment"></div>
                        
                    </div>
                        <div id="abc" style="width: 470px;height: 400px; background-color: #dddddd; position: absolute; float:left;top: 20px">
                        <div id="galleria" style="height: 400px;">        
                        </div>
                    </div>        
                        <div style="top:398px;width:200px;margin-left:490px;position: absolute;">
                        <input type="text" id="contentComment" name="q" style="width: 295px;"></input>
                    </div>            
                </div>
                <div id="tab3" class="tab_content">
                    <h2>Resources</h2>
                    <a href="#"><img alt="" /></a>
                    <h3>
                        <a href="#">hello3</a>
                    </h3>
                </div>
                <div id="tab4" class="tab_content">
                    <h2>Contact</h2>
                </div>
            </div>
        </div>
         <div id="button" >
         	<input type="button" value="Add to Compare" style="position: absolute; top: 472px; left: 670px;  width: 120px;" />
            <input type="button"  id="test" onclick="isToFavourite();" value="Add to Favourite" style="position: absolute; top: 472px; left: 545px; width: 120px;" />
            <input type="button"  id="remove" onclick="isRemove();" value="Remove Favourite" style="position: absolute; top: 472px; left: 545px;display:none; width: 120px;" />
        </div>
    </div>
    <script>setCenter("frmDetail")</script>
</body>
</html>